<html>
<head>
<title>df</title>
<meta type="description" content="Find the shortest route between two places on the map."/>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="./coordinates.js"></script>
<script type="text/javascript">


	// center of the map (compute the mean value between the two locations)
	var latlng = new google.maps.LatLng(array_sum(lat1)/NumberofTestpoints,array_sum(long1)/NumberofTestpoints);
	
	function showMap()
	{
			
		for( var i=0;i<NumberofTestpoints;i++)	//Array indexing starts from 0 and should end at limit-1
		{	//location of the two addresses (latitude + longitude)
			var location1 = new google.maps.LatLng(lat1[i],long1[i] );
			var location2 = new google.maps.LatLng(lat2[i],long2[i] );
			//alert("iteration id updated in main loop");
			//plots a new map on the html page with new element id "map_canvas_X"
			showMap_sub(i,location1,location2);
		}//close for loop
	
	}//close function	
	
	// finds the coordinates for the two locations
	function showMap_sub(j,loc1,loc2)
	{
			// set map options
				// set zoom level
				// set center
				// map type
			var mapOptions = 
			{
				zoom: 1,
				center: latlng,
				mapTypeId: google.maps.MapTypeId.HYBRID
			};
			// create a new map object
			// set the div id where it will be shown
			// set the map options
			var temp203 = 'map_canvas'+j;
			
			map = new google.maps.Map(document.getElementById(temp203), mapOptions);	
			// show route between the points
			var directionsService = new google.maps.DirectionsService();
			var directionsDisplay = new google.maps.DirectionsRenderer(
			{
				suppressMarkers: true,
				suppressInfoWindows: true
			});
			directionsDisplay.setMap(map);
			var request = {
				origin:loc1, 
				destination:loc2,
				travelMode: google.maps.DirectionsTravelMode.DRIVING
			};
			directionsService.route(request, function(response, status) 
			{
				if (status == google.maps.DirectionsStatus.OK) 
				{
					directionsDisplay.setDirections(response);
					
					var distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
					distance += "<br/>The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
					distance = response.routes[0].legs[0].distance.value+" "+response.routes[0].legs[0].duration.value+";"; // meters, seconds ONLY
					var temp = "distval_r"+j;
					document.getElementById(temp).innerHTML = distance;
					//alert("Queried distance from api: "+j);
				}
				else
				{
					alert("DirectionDisplay was not successful for the following reason: " + status);
				}
			});	
	}// function close

	function array_sum (array) {
	    // Returns the sum of the array entries  
	    // http://phpjs.org/functions/array_sum 
	    var key, sum = 0;
	    // input sanitation
	    if (typeof array !== 'object') {
		return null;
	    }
            for (key in array) {
	    //tester_print_r(typeof sum);
		sum += (array[key] * 1);
	    }
	    return sum;
	}// function close
/*	
//used for flying distance computation, separate function. not relavent. 
 
	function toRad(deg) 
	{
		return deg * Math.PI/180;
	}
*/
//************************* to be put within showMap

/*
Shows a 'straingt/flying line' between two points. Not relavent
		
		// show a line between the two points
		var line = new google.maps.Polyline({
			map: map, 
			path: [location1, location2],
			strokeWeight: 7,
			strokeOpacity: 0.8,
			strokeColor: "#FFAA00"
		});
*/
		
/*
// Puts markers at the manhole. Might be important. can be arrayed.. to be tested.

		// create the markers for the two locations		
		var marker1 = new google.maps.Marker({
			map: map, 
			position: location1,
			title: "First location"
		});
		var marker2 = new google.maps.Marker({
			map: map, 
			position: location2,
			title: "Second location"
		});
*/	
//************************ end to be put within showMap	

</script>
</head>


<body bgcolor="#eeeeee">
	
	<div id="form" style="width:100%; height:10%"> <input type="button" value="Show" onclick=" showMap();"/></td> </div>

	<script type="text/javascript">		
		for(var k=0; k < NumberofTestpoints; k++)
		{
			document.write('<center><div id="distval_r'+k+'"  style="width:100%; height:10%" > dist_computed_ '+k+'</div></center>');
		}
		for(var k=0; k < NumberofTestpoints; k++)
		{
			document.write('<center><div id="map_canvas'+k+'" style="width:35%; height:34%">map '+k+'</div></center> <br/>');
		}
	</script>
	
</body>
</html>





